<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="format-detection" content="telephone=no" />
    <title>世界杯竞猜</title>
    <link rel="stylesheet" href="css/style.css?v=1.6">
	<link rel="stylesheet" href="css/cup.css?v=1.6">
	<script src="js/jquery-1.8.3.min.js?v=1.6"></script>
	<script src="layer/mobile/layer.js?v=1.6"></script>
    <script src="js/flexible.js?v=1.6"></script>
</head>
<body style="background: #F9F9F9;">
	<div class="top-banner">
		<img src="image/banner.jpg">
		<span class="top-rule">详细规则</span>
	</div>
	<div class="nav">
		<a class="cup fl" >竞猜排行榜<span class="send">（每次派奖后更新排行榜）</span></a>
		<a class="part fr" id="send" style="margin-right: .6rem;">查看更多</a>
		<div class="arrow"><img src="image/down.png" ></div>
	</div>
	<div class="rank clearfix">
	
	</div>
	<div class="nav clearfix">
		<a class="cup fl">云彩·世界杯竞猜</a>
		<a class="part fr" href="list.html">我的参与 &gt</a>
	</div>
	<div id="game">

	</div>
	<p class="no-more">没有更多了~</p>
	
	<div class="block_bg"></div>
	<!--详细规则-->
	<div class="detail">
		<h3 class="title">云钻竞猜规则详情</h3>
		<p>1. 用户根据其投注的足球队，在常规比赛时间内的（不含加时、点球）比赛结果，投注项目包括胜、平、负三个项目，以云钻为单位派发奖励；</p>
		<p>2. 每场球赛开场前0.5h即截止本轮竞猜投注；</p>
		<p>3. 派奖计算公式：</p>
		<p>1）猜中比赛结果则赢得本场竞猜，未猜中的用户输掉云钻，赢家按照投注占比赢取云钻；</p>
		<p>2）派奖计算公式：用户A赢取云钻数＝用户A投注云钻数*（1＋所有未猜中用户投注云钻总数*0.8/所有猜中用户投注云钻总数）</p>
		<p>4. 用户所获云钻将于1个工作日内到达其云上账户；</p>
		<p>5. 本活动最终解释权归云上所有。</p>
		<input type="button" id="argeement" value="同意" />
	</div>
	<!--竞猜-->
	<div class="quiz">
		<h3>参与竞猜</h3>
		<p>您选择的<span class="select">“主胜”</span></p>
		<p>请选择您的云钻支持数</p>
		<p class="tishi">(竞猜云钻数需为大于0的整数)</p>
		<div class="number">
			<span id="reduct">-</span>
			<input type="number" class="input" value="1">
			<span id="add">+</span>
		</div>
		<input type="button" value="提交" class="refer">
	</div>
</body>
<script type="text/javascript">
	$('.top-rule').click(function(){
		$('.block_bg').fadeIn();
		$('.detail').fadeIn();
	})
	$('#argeement').click(function(){
		$('.detail').fadeOut();
		$('.block_bg').fadeOut();
	})
	$('.block_bg').click(function(){
		$('.block_bg').fadeOut();
		$('.quiz').fadeOut();						
		$('.detail').fadeOut();
	})
	
	$(function(){
		var userId = getQueryString('userid');//获取用户id
		sessionStorage.setItem('userId', userId);//存储userid
		var index = 0,
			matchId;
		$ajax(
			url+'getMatchList.ashx',
			'GET',
			{},
			function(data){
				if(data.data.matchPlayerList.length>0){
					var playlist = data.data.matchPlayerList,
						_res = '';						
					for(var i = 0;i<playlist.length;i++){
						_res+='<div class="line clearfix"><span class="fl">'+(i+1)*1+'、'+playlist[i].UserName+'</span><span class="fr"><img src="image/drill.png" class="drill"> <i class="pcs">'+playlist[i].Score+'</i></span></div>'
					}

					$('.rank').append(_res);
				}
				var _height = $('.line').innerHeight(),
					_status = true;
				$('.rank').css('height',_height*3+'px');

				$('#send').click(function(){
					
					if(_status){
						$('.rank').css('height',_height*playlist.length+'px');
						$('.arrow img').attr('src','image/up.png').addClass('up');
						_status = false;
					}else{
						$('.rank').css('height',_height*3+'px');
						$('.arrow img').attr('src','image/down.png').removeClass('up');
						_status = true;
					}
					
				});
			if(data.data.matchList.length>0){
				var list = data.data.matchList,
					res = '';
				for(var i = 0 ;i<list.length;i++){
					res+='<div class="list">'+
							'<p class="timer clearfix">竞猜截止时间：<span class="time">'+list[i].ActiveTo+'</span></p>'+
							'<div class="wrap">'+
								'<div class="item">'+
									'<div class="unit nation">'+list[i].ZhuDui+'</div>'+
									'<div class="unit">主</div>'+
								'</div>'+
								'<div class="item">'+
									'<div class="unit nation"><img src="image/abbr.png" alt=""></div>'+
									'<div class="unit groove">（常规时间内，不含加时、点球）</div>'+
								'</div>'+
								'<div class="item">'+
									'<div class="unit nation">'+list[i].KeDui+'</div>'+
									'<div class="unit">客</div>'+
								'</div>'+
							'</div>'+
							'<div class="wrap" id="hit" style="background: #fff;" data-matchId='+list[i].MatchID+'>'+
								'<div class="item" ><img src="image/win.png" alt="主赢"></div>'+
								'<div class="item"><img src="image/flat.png" alt="主平"></div>'+
								'<div class="item"><img src="image/burden.png" alt="主负"></div>'+
							'</div>'+
						'</div>'
				}
				$('#game').html(res);
				
				$('#hit .item').click(function(){
					index = $(this).index(); //索引值
					matchId = $(this).parent().attr('data-matchId');
					algorithm();
					$('.block_bg').fadeIn();
					$('.quiz').fadeIn();
					if(index == 0){
						$('.quiz .select').text('主胜');
					}else if(index == 1){
						$('.quiz .select').text('主平');
					}else if(index == 2){
						$('.quiz .select').text('主负');
					}
				})
				$('.refer').click(function(){
					$('.block_bg').hide();
					$('.quiz').hide();
					var sum = parseInt($('.quiz .input').val());
					var postData = {
							MatchID:matchId,
							VoteValue:index+1,
							VoteYunZuan:sum,
							UserID:userId
						};
					$ajax(
						url+'saveMatchOrder.ashx',
						'POST',
						postData,
						function(data){
							layer.open({
								content: data.msg,
								skin: 'msg',
								time: 2 
							});
						},
						function(data){
							layer.open({
								content: data.msg,
								skin: 'msg',
								time: 2
							});
						}
					)
				})
			}
		},
		function(data){
			layer.open({
				content: data.msg,
				skin: 'msg',
				time: 2 
			});
		}
		);
	})
</script>
</html>